<script setup lang="ts">

import {computed, ref,inject,watch,reactive,provide} from "vue";
import Button from "@cps/ma-resource/button.vue";
import { Message } from '@arco-design/web-vue'
import UpdateInfo from '@/views/customers/customer/components/update.vue'
import Finance from '@/views/customers/customer/components/finance.vue'
import AddressList from '@/views/customers/customer/components/address.vue'
import AuthInfo from '@/views/customers/customer/components/auth.vue'
const buttonType = ref("1")
const record = ref({})
const visible = ref(false)
const open = async (data) => {
  record.value = data
  visible.value = true
}
const close = () => {
  visible.value = false
}
provide('record',record)
provide('close',close)
defineExpose({open})
</script>

<template>
  <a-drawer :visible="visible" class="customer-info-draw" width="80%" @cancel="close" :footer="false"
            unmount-on-close>
            <template #title >
              <div class="grid grid-cols-[minmax(0,1fr),auto] items-center">
                <div>用户详情</div>
                <div class="buttons">
                  <a-radio-group type="button" v-model="buttonType" @click.stop>
                    <a-radio value="1">基础信息</a-radio>
                    <a-radio value="2">财务数据</a-radio>
                    <a-radio value="3" v-auth="['customer:address:index']" >地址资料</a-radio>
                    <a-radio value="4">认证资料</a-radio>
                    <a-radio value="5">API密钥</a-radio>
                    <a-radio value="6">登陆记录</a-radio>
                  </a-radio-group>
                </div>
              </div>
            </template>
            <a-space direction="vertical" class="w-full">
              <template v-if="buttonType == 1">
                  <update-info />
              </template>
              <template v-if="buttonType == 2">
                <finance />
              </template>
              <template v-if="buttonType == 3">
                <address-list />
              </template>
              <template v-if="buttonType == 4">
                <auth-info />
              </template>
              <template v-if="buttonType == 5">
                API密钥
              </template>
              <template v-if="buttonType == 6">
                登陆记录
              </template>
                 
            </a-space>
  </a-drawer>
</template>

<style lang="less">
.customer-info-draw .arco-drawer-title .buttons{
  margin-right:100px
}
.customer-info-draw .arco-drawer-title .arco-radio-button{
  width: 80px;
  height: 35px;
  line-height: 35px;
  text-align: center;
}
.customer-info-draw .arco-drawer-title .arco-radio-checked{
  border-bottom: 2px solid #0066ff;
}
</style>